<template>
  <div>
    <!-- class="main-el-contarner" -->
    <!-- 通知模板窗口 -->
    <el-container>
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box2">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="通知类型：" label-width="90px">
                <el-select
                  v-model="param.warnStatus"
                  placeholder="选择通知类型"
                  :clearable="true"
                  size="small"
                  style="width: 150px"
                  @clear="delValue"
                >
                  <el-option label="故障通知" value="1"></el-option>
                  <el-option label="离线通知" value="2"></el-option>
                  <el-option label="消防通知" value="3"></el-option>
                  <el-option label="周界通知" value="4"></el-option>
                  <el-option label="周位通知" value="5"></el-option>
                  <!-- <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入通知模板名称关键字检索"
                  v-model="param.name"
                  clearable
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch"
                  >查找</el-button
                >
              </el-form-item>
              <!-- <el-form-item style="float: right">
                  <el-button type="text" style="color:#18BC9C;" @click="bind"><i class="el-icon-plus"></i> 确定</el-button>
                </el-form-item> -->
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              stripe
              height="29vh"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              ref="talbes"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column
                prop="template_name"
                label="通知模板名称"
                width="160"
              >
              </el-table-column>
              <el-table-column prop="inform_type" label="通知类型" width="120">
                <template #default="scope">
                  <span v-if="scope.row.inform_type == 1">故障通知</span>
                  <span v-if="scope.row.inform_type == 2">离线通知</span>
                  <span v-if="scope.row.inform_type == 3">消防通知</span>
                  <span v-if="scope.row.inform_type == 4">周界通知</span>
                  <span v-if="scope.row.inform_type == 5">周位通知</span>
                </template>
              </el-table-column>
              <el-table-column prop="user_name" label="通知对象" width="230">
              </el-table-column>
              <el-table-column prop="inform_content" label="通知内容">
              </el-table-column>
              <el-table-column prop="auditing" label="启动状态" width="150">
                <template slot-scope="scope">
                  <span v-if="scope.row.auditing == '0'">启用</span>
                  <span v-else-if="scope.row.auditing == '1'">禁用</span>
                  <span v-else>/</span>
                </template>
              </el-table-column>
              <el-table-column prop="inform_way" label="通知方式">
                <template #default="scope">
                  <div
                    v-for="(val, index) in scope.row.inform_way"
                    :key="index"
                  >
                    <span v-if="val == '1'">企业微信</span>
                    <span v-if="val == '2'">钉钉</span>
                    <span v-if="val == '3'">邮件</span>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column
                  fixed="right"
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="text" icon="el-icon-edit" style="color: #18BC9C;margin:5px;padding:0px;">编辑</el-button> | 
                    <el-button @click="delClick(scope.row)" type="text" icon="el-icon-delete" style="color: #FF0000;margin:5px;padding:0px;">删除</el-button>
                  </template>
                </el-table-column> -->
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pager"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
            <div style="float: right">
              <el-button
                type="primary"
                style="color: #ffffff; z-index: 99999999"
                @click="bind"
              >
                确定</el-button
              >
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from '@/views/inc/SideHeader'
import Navlanmu from '@/views/inc/Navlanmu'
import LeftMenuMessage from '@/views/inc/LeftMenuMessage'
import { getDateTimes, numFormat, getDateWeek } from '@/utils/index.js'
import { getlist, getgridsave, getdeletes, getexpro } from '@/api/message/list'

export default {
  name: 'NoticeTemplate',
  //   prop:{
  //     templateName:{
  //         type:Number,
  //         default: 1,
  //     }
  //   },
  props: ['receive'],
  components: { SideHeader, Navlanmu, LeftMenuMessage },
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        funId: 'msg_inform_template',
        baseSQL: '',
        warnStatus: '',
        name: '',
        offset: 0,
        pager: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      dialogFormVisible: false,
      dialogtitle: '',
      formdata: {
        funId: 'msg_inform_template',
        datas: [
          {
            // template_id:'',
            template_name: '',
            inform_type: '',
            inform_content: '',
            auditing: '',
            inform_way: '',
          },
        ],
      },
      formLabelWidth: '120px',
      rules: {
        template_name: [
          { required: true, message: '模板名称必填', trigger: 'blur' },
        ],
        inform_way: [
          { required: true, message: '通知方式必填', trigger: 'blur' },
        ],
        inform_type: [
          { required: true, message: '通知类型必填', trigger: 'blur' },
        ],
        auditing: [
          { required: true, message: '启用状态必填', trigger: 'blur' },
        ],
      },
      selectoptions: '',
      templateName: '',
    }
  },
  mounted() {
    //
    this.getDatas()
  },
  created() {
    this.isloading = false
    //  this.getDatas()
    //   console.log('重新加载啦')
  },
  methods: {
    nodeClick(type, data) {
      this.loadingdata1 = true
      console.log('nodeClick', type, data)
      this.searchForm = data
      this.getEnergyQushi()
      this.getEnergyDeptRanking()
      this.getEnergylevelCount()
    },
    //新增按钮
    handleAdd() {
      if (this.$refs['formdata']) {
        this.$refs['formdata'].resetFields()
      }
      this.dialogFormVisible = true
      this.formdata.datas[0].template_id = ''
      this.formdata.datas[0].template_name = ''
      this.formdata.datas[0].inform_type = ''
      this.formdata.datas[0].inform_content = ''
      this.formdata.datas[0].auditing = ''
      this.formdata.datas[0].inform_way = ''
      this.dialogtitle = '新增告警信息'
    },
    //添加数据
    addtemplate() {
      getgridsave(this.formdata).then((res) => {
        if (res.data.code == '200') {
          this.$message({
            message: '添加告警成功',
            type: 'success',
          })
          this.getDatas()
        } else {
          this.$message({
            message: '添加告警失败',
            type: 'error',
          })
        }
      })
    },
    //修改数据
    updatetemplate() {
      getgridsave(this.formdata).then((res) => {
        if (res.data.code == '200') {
          this.$message({
            message: '修改告警成功',
            type: 'success',
          })
          this.getDatas()
        } else {
          this.$message({
            message: '修改告警失败',
            type: 'error',
          })
        }
      })
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pager = 1
      this.getDatas()
      // console.log('param.warnStatus',this.param.warnStatus)
    },
    // 复选框按钮
    selectionChange(e) {
      // console.log('rree', e)
      if (e.length != '1') {
        this.$message({
          message: '请选择一条数据',
          type: 'error',
        })
        this.toggleSelection(e)
      } else {
        this.templateName = e
      }
      // console.log("this.templateName", this.templateName);
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e)
      const _selectData = this.$refs.talbes.selection
      this.selectionChange(_selectData)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.talbes.toggleRowSelection(row)
        })
        this.templateName = ''
      } else {
        this.$refs.talbes.clearSelection()
      }
    },
    bind() {
      if (this.templateName.length == '0') {
        this.$message({
          message: '请选择一条数据',
          type: 'error',
        })
      } else {
        this.$emit('getName', this.templateName)
      }
    },
    indexMethod(index) {
      return (this.param.pager - 1) * this.param.limit + index + 1
    },
    sizeChange(val) {
      // console.log('val',val)
      this.param.limit = val
      this.getDatas()
    },
    currentChange(val) {
      // console.log('val',val)
      this.param.pager = val
      this.param.offset = (val - 1) * this.param.limit
      this.getDatas()
    },
    //保存按钮
    confirm() {
      this.$refs['formdata'].validate((valid) => {
        if (valid) {
          // console.log('valid',valid)
          if (this.formdata.datas[0].template_id) {
            this.updatetemplate()
            this.dialogFormVisible = false
          } else {
            this.addtemplate()
            this.dialogFormVisible = false
          }
        }
      })
    },
    //编辑按钮
    editClick(info) {
      console.log('info', info)
      this.dialogtitle = '修改告警信息'
      this.dialogFormVisible = true
      this.formdata.datas[0] = info
      // this.formdata.sessonId='9388bc48-fc19-420a-aa6a-5c710de7ad19'
      if (this.$refs['formdata']) {
        this.$refs['formdata'].resetFields()
      }
    },
    //删除按钮
    delClick(info) {
      // console.log('info',info)

      var tablefromdata = {
        funId: 'msg_inform_template',
        ids: info.template_id + ';',
      }
      // console.log('tablefromdata',tablefromdata)

      this.$confirm(`删除${info.template_name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          console.log('res', res)
          // if(res.status=='200'){
          if (res.data.code == '200') {
            this.$message({
              message: '删除告警成功',
              type: 'success',
            })
            this.getDatas()
          } else {
            this.$message({
              message: '删除告警失败',
              type: 'error',
            })
          }
          // }
          // else{
          //   this.$message({
          //       message: '删除告警失败',
          //       type: 'error'
          //   });
          //}
        })
      })
    },
    delValue() {
      this.getDatas()
    },
    getDatas() {
      if (this.param.warnStatus == '' && this.param.name == '') {
        this.param.baseSQL = ''
      } else {
        // this.param.baseSQL='inform_type like "%'+this.param.warnStatus+'%"'
        // this.param.baseSQL='inform_type="'+this.param.warnStatus+'"'
        this.param.baseSQL =
          'inform_type like "%' +
          this.param.warnStatus +
          '%" and ' +
          'template_name like"%' +
          this.param.name +
          '%"'
      }
      getlist(this.param).then((res) => {
        if (res.status == '200') {
          let resdata = res.data
          this.tabledatas = resdata.rows
          this.dataTotal = resdata.total
          let newData = []
          resdata.rows.forEach((item) => {
            if (item.auditing == 0) {
              newData.push({
                value: item.inform_type,
                label: item.inform_type,
                auditing: item.auditing,
              })
            }
          })
          this.selectoptions = this.unique(newData)
        }
      })
    },
    //筛选重复字段
    unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
    },
  },
}
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box2 {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  /* position: fixed; */
}

.righttop-search-box2 .el-form-item {
  margin-bottom: 0px !important;
}

.container-box2 {
  padding: 10px;
}

.pagebox {
  text-align: right;
  padding: 10px;
}
</style>
